<!--
 @pageChange  监控当前页码数据返回导出方法
 @sizeChange  监控当前每页显示数据返回导出方法
 :totalPage    总条数
 :currentPage 当前页码

 调用方式
<footer-page :totalPage.sync="total" :currentPage.sync="cur_page" @pageChange="pageChange" @sizeChange="sizeChange"></footer-page>
-->

<template>
  <div class="footer">
    <div style="text-align: center;">
      <el-pagination
        background
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="currentPage"
        :page-sizes="pageNumber"
        :page-size="pageSize"
        :layout="layout"
        :total="totalPage"
      >
      </el-pagination>
      <!--<Page-->
      <!--:total="totalPage"-->
      <!--:current="currentPage"-->
      <!--:page-size="pre_page"-->
      <!--@on-change="pageChange"-->
      <!--@on-page-size-change="sizeChange"-->
      <!--size="small"-->
      <!--:page-size-opts="pageNumber"-->
      <!--show-elevator-->
      <!--show-sizer-->
      <!--show-total-->
      <!--/>-->
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      pageSize: {
        type: Number,
        default: 12
      },
      totalPage: {
        type: Number,
        default: 0
      },
      currentPage: {
        type: Number,
        default: 1
      },
      pageNumber: {
        type: Array,
        default: () => {
          return [12, 20, 50, 100]
        }
      },
      layout: {
        type: String,
        default: () => {
          return 'total, prev, pager, next, sizes, jumper'
        }
      }
    },
    // data () {
    //   return {
    //     pre_page: 10
    //   }
    // },
    methods: {
      pageChange (cval) {
        this.$emit('pageChange', cval)
      },
      sizeChange (cval) {
        this.$emit('sizeChange', cval)
      }
    }
  }
</script>
<style scoped>
  .footer{
    padding-top: 20px;
  }

</style>
